<script setup>
import NavBar from "@components/NavBar.vue";
import SkillsSection from "@components/SkillsSection.vue";
import AboutSection from "@components/AboutSection.vue";
import Switcher from "@components/Switcher.vue";
import HomeSection from "@components/HomeSection.vue";
import ExperienceSection from "@components/ExperienceSection.vue";
import BackGround from "@components/BackGround.vue";
import ProjectsSection from "@components/ProjectsSection.vue";
import {useSeoMeta} from '@unhead/vue';
import {SEO_META} from "@public/config.js";

useSeoMeta(SEO_META);

onMounted(() => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) entry.target.classList.add('active');
            else entry.target.classList.remove('active');
        });
    }, { threshold: 0, rootMargin: '-1px' });

    document.querySelectorAll('.animation-fade-in-out').forEach(item => {
        observer.observe(item);
    });
})
</script>

<template>
    <!-- 导航栏 -->
    <NavBar/>

    <!-- 首页 -->
    <HomeSection/>

    <!-- 关于作者 -->
    <AboutSection/>

    <!-- 技术栈 -->
    <SkillsSection/>

    <!-- 项目经历 -->
    <ProjectsSection/>

    <!-- 实习经历 -->
    <ExperienceSection/>

    <!--背景-->
    <BackGround/>

    <!--切换器-->
    <Switcher/>
</template>

<style lang="scss" scoped>

</style>
